<template>
  <div>
    <Modal
      :loading="true"
      v-model="show"
      :width="500"
      @on-ok="onPrintSettingSave"
      @on-cancel="onPrintSettingCancel"
      class="expression"
    >
      <p slot="header">
        <span
          >打印设置
          <Tooltip :transfer="true" content="打印文档" placement="top">
            <a
              class="jimu-table-tip help-color"
              href="http://report.jeecg.com/1605005"
              target="_blank"
              ><Icon
                size="14"
                type="ios-help-circle-outline"
                style="margin-top: 2px"
            /></a>
          </Tooltip>
        </span>
      </p>
      <i-form label-colon :label-width="90">
        <Row>
          <i-col span="6">
            <span>打印纸张：</span>
          </i-col>
          <i-col span="18">
            <i-select v-model="paper" @on-change="onPaperChange">
              <i-option
                v-for="(item, index) in paperList"
                :index="index"
                :value="item.paper"
                :key="index"
              >
                {{ getPaperText(item) }}
              </i-option>
            </i-select>
          </i-col>
        </Row>

        <Row style="margin-top: 8px">
          <i-col span="6">
            <span>打印布局：</span>
          </i-col>
          <i-col span="18">
            <RadioGroup v-model="layout" @on-change="onLayoutChange">
              <Radio label="portrait" border>
                <span>纵向</span>
              </Radio>
              <Radio label="landscape" border>
                <span>横向</span>
              </Radio>
            </RadioGroup>
          </i-col>
        </Row>

        <Row style="margin-top: 8px">
          <i-col span="6">
            <span>打印边距(mm)：</span>
          </i-col>
          <i-col span="18">
            <i-input
              type="number"
              v-model="marginX"
              style="width: 40%"
              @on-change="onPaperMarginXChange"
            ></i-input>
            -
            <i-input
              type="number"
              v-model="marginY"
              style="width: 40%"
              @on-change="onPaperMarginYChange"
            ></i-input>
          </i-col>
        </Row>

        <Row style="margin-top: 8px">
          <i-col span="6">
            <span>像素宽高(px)：</span>
          </i-col>
          <i-col span="18">
            <i-input v-model="pxWidth" readonly style="width: 40%"></i-input>
            -
            <i-input v-model="pxHeight" readonly style="width: 40%"></i-input>
          </i-col>
        </Row>

        <Row style="margin-top: 8px">
          <i-col span="6">
            <span>打印清晰度：</span>
          </i-col>
          <i-col span="18">
            <slider :min="1" :max="10" v-model="definition"></slider>
          </i-col>
        </Row>
      </i-form>
    </Modal>
  </div>
</template>
<script>
const papers = [
  { paper: "A4", width: 210, height: 297 },
  { paper: "A3", width: 297, height: 420 },
  { paper: "Letter", width: 216, height: 279 },
  { paper: "Legal", width: 216, height: 355 },
  { paper: "Executive", width: 184, height: 266 }
];
export default {
  name: "j-print-setting",
  props: {
    show: {
      type: Boolean,
      required: false,
      default: false
    },
    config: {
      type: String,
      required: false,
      default: () => {}
    },
    settings: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      paperList: [],
      //纸张标识
      paper: "",
      // 纸张宽高
      width: "",
      height: "",
      //清晰度
      definition: "",
      //是否套打
      isBackend: "",
      dpi: "",
      pxWidth: "",
      pxHeight: "",
      marginX: 10,
      marginY: 10,
      layout: "portrait"
    };
  },
  created() {
    this.initPaperList();
    this.getWindowDpi();
  },
  watch: {
    config: {
      immediate: true,
      handler: function() {
        this.initPaperList();
      }
    },
    settings: {
      deep: true,
      immediate: true,
      handler: function() {
        this.resetForm(this.settings);
      }
    }
  },
  methods: {
    onPrintSettingSave() {
      // console.log('this.getEmitParam()', this.getEmitParam())
      this.$emit("change", this.getEmitParam());
    },
    onPrintSettingCancel() {
      this.$emit("change", false);
    },
    // 获取回传的参数
    getEmitParam() {
      return {
        paper: this.paper,
        width: this.width,
        height: this.height,
        definition: this.definition,
        isBackend: this.isBackend,
        marginX: this.marginX || 0,
        marginY: this.marginY || 0,
        layout: this.layout
      };
    },
    // 纸张大小改变事件
    onPaperChange(value) {
      let arr = this.paperList.filter(item => {
        return item.paper === value;
      });
      this.resetForm(arr[0]);
    },
    onPaperMarginYChange(event) {
      let temp = parseInt(event.target.value || 0);
      if (temp < 0) {
        temp = 0;
      }
      this.marginY = temp;
      if (this.layout == "portrait") {
        this.pxHeight = this.getPxHeight(this.height) + "px";
      } else {
        this.pxWidth = this.getPxHeight(this.height) + "px";
      }
    },
    onPaperMarginXChange(event) {
      let temp = parseInt(event.target.value || 0);
      if (temp < 0) {
        temp = 0;
      }
      this.marginX = temp;
      if (this.layout == "portrait") {
        this.pxWidth = this.getPxWidth(this.width) + "px";
      } else {
        this.pxHeight = this.getPxWidth(this.width) + "px";
      }
    },
    getPaperText(item) {
      return item.paper + "：" + item.width + "mm x " + item.height + "mm";
    },
    initPaperList() {
      let printPaper = [];
      if (this.config) {
        let config2 = JSON.parse(this.config);
        if (config2 && config2["printPaper"]) {
          printPaper = config2["printPaper"];
        }
      }
      let arr = [];
      for (let item of papers) {
        arr.push(item);
      }
      for (let item of printPaper) {
        arr.push({
          paper: item.title,
          width: item["size"][0],
          height: item["size"][1]
        });
      }
      this.paperList = [...arr];
    },
    resetForm: function(param) {
      if (param) {
        this.paper = param.paper;
        this.width = param.width;
        this.height = param.height;
        if (param.marginX || param.marginX == 0) {
          this.marginX = param.marginX;
        }
        if (param.marginY || param.marginY == 0) {
          this.marginY = param.marginY;
        }
        if (param.layout) {
          this.layout = param.layout;
        }
        this.resetPrintPx();
        if (param.definition) {
          this.definition = param.definition;
        }
        if (param.isBackend === true || param.isBackend === false) {
          this.isBackend = param.isBackend;
        }
      }
    },
    // 重置宽高px的值
    resetPrintPx() {
      let pxWidth = this.getPxWidth(this.width) + "px";
      let pxHeight = this.getPxHeight(this.height) + "px";
      if (this.layout == "portrait") {
        this.pxWidth = pxWidth;
        this.pxHeight = pxHeight;
      } else {
        this.pxWidth = pxHeight;
        this.pxHeight = pxWidth;
      }
    },
    //获取窗口dpi
    getWindowDpi() {
      //25.41 1英寸=25.41mm 96是window默认dpi,mac:72
      let arrDPI = new Array();
      if (window.screen.deviceXDPI != undefined) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
      } else {
        let tmpNode = document.createElement("DIV");
        tmpNode.style.cssText =
          "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
      }
      this.dpi = [...arrDPI];
    },
    //获取像素宽
    getPxWidth(width) {
      let margin = this.marginX;
      if (this.isBackend == true) {
        margin = 0;
      }
      return Math.ceil(((width - margin * 2) / 25.41) * this.dpi[0]);
    },
    //获取像素高
    getPxHeight(height) {
      let margin = this.marginY;
      if (this.isBackend == true) {
        margin = 0;
      }
      return Math.ceil(((height - margin * 2) / 25.41) * this.dpi[1]);
    },
    // 布局改变
    onLayoutChange(value) {
      this.layout = value;
      this.resetPrintPx();
    }
  }
};
</script>
